<template>
  <div class="operator-info">
    <div class="back" @click="back"></div>
    <div class="page-top">
      经营户全画像
    </div>
    <div class="operator-main">
      <div class="operator-section-655 left-top">
        <div class="section-title">
          经营户画像
        </div>
        <div class="base-info">
          <img src="../assets/images/temp/operator.jpeg" alt="">
          <div class="info-detail">
            经营户名称：<span>志娟批发</span> <br>
            经营户信用：<span>90</span> <br>
            信用星级：<div class="star-box">
              <div class="star-bottom">
                <img src="../assets/images/operatorInfo/star_bottom.png" alt="" v-for="item in 5">
              </div>
              <div class="star-top" :style="{width: '90%'}">
                <img src="../assets/images/operatorInfo/star_top.png" alt="" v-for="item in 5">
              </div>
            </div> <br>
            本年累计销售额：<span>2340000元</span> <br>
            本年共富共建积分：<span>2.3分</span> &nbsp;&nbsp;&nbsp;&nbsp; 进口商品：<span>不涉及</span><br>
            负责人：<span>沈志娟</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;年龄：<span>55</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;性别：<span>女</span> <br>
            政治面貌：<span>中共党员</span> &nbsp;&nbsp;&nbsp;&nbsp;所属党支部：<span>联合党支部</span><br>
            职务：<span>蔬菜区党小组成员</span> <br>
          </div>
          <div class="card-btn">营业执照</div>
        </div>
        <div class="no-bg-title">信用更新记录</div>
        <div class="safety-list-title" style="margin-top: 00px;">
          <div class="safety-list-title-item" style="width: 33%;">信用更新原因</div>
          <div class="safety-list-title-item" style="width: 33%;">信用更新情况</div>
          <div class="safety-list-title-item" style="width: 33%;">时间</div>
        </div>
        <div class="safety-list-box" style="height: 81px;">
          <vue-seamless-scroll
              :data="gfxjyhListData"
              class="seamless-warp"
              :class-option="classOption">
            <div v-for="(item, index) in gfxjyhListData" :key="index" class="safety-list-box-item">
              <div class="item-section" style="width: 33%;">{{item.name}}</div>
              <div class="item-section" style="width: 33%;">{{item.type}}</div>
              <div class="item-section" style="width: 33%;">{{item.num}}</div>
            </div>
          </vue-seamless-scroll>
        </div>
        <div class="no-bg-title">从业人员</div>
        <div class="safety-list-title" style="margin-top: 00px;">
          <div class="safety-list-title-item" style="width: 12%;">姓名</div>
          <div class="safety-list-title-item" style="width: 12%;">职务</div>
          <div class="safety-list-title-item" style="width: 12%;">性别</div>
          <div class="safety-list-title-item" style="width: 12%;">年龄</div>
          <div class="safety-list-title-item" style="width: 32%;">身份证号</div>
          <div class="safety-list-title-item" style="width: 20%;">政治面貌</div>
        </div>
        <div class="safety-list-box" style="height: 81px;">
          <vue-seamless-scroll
              :data="gfxjyhListData"
              class="seamless-warp"
              :class-option="classOption">
            <div v-for="(item, index) in gfxjyhListData" :key="index" class="safety-list-box-item">
              <div class="item-section" style="width: 12%;">{{item.name}}</div>
              <div class="item-section" style="width: 12%;">{{item.type}}</div>
              <div class="item-section" style="width: 12%;">{{item.num}}</div>
              <div class="item-section" style="width: 12%;">{{item.num}}</div>
              <div class="item-section" style="width: 32%;">{{item.num}}</div>
              <div class="item-section" style="width: 20%;">{{item.num}}</div>
            </div>
          </vue-seamless-scroll>
        </div>
      </div>
      <div class="operator-section-285 left-bottom">
        <div class="section-title">
          AI抓拍
        </div>
        <div class="ai-zp-main">
          <div class="main-left">
            <div class="main-item" style="height: 50%;width: 70px;">
              <div class="main-item-num" style="margin-top: 40px;font-size: 35px;font-weight: 400;">19</div>
              <div class="main-item-name" style="margin-top: 0px;">抓拍次数</div>
            </div>
            <div class="main-item" style="height: 50%;width: 70px;">
              <div class="main-item-num" style="margin-top: 10px;font-size: 35px;font-weight: 400;">19</div>
              <div class="main-item-name" style="margin-top: 0px;">处置次数</div>
            </div>
          </div>
          <div class="main-right">
            <el-carousel
                indicator-position="none"
                :interval="5000"
                height="200px">
              <el-carousel-item v-for="(item, index) in aiListData" :key="index">
                <div class="ai-warn-box" style="display: inline-block;float: left;">
                  <img :src="item.url" style="float: left;width: 260px;height: 200px;margin-top: 0px;margin-left: 0px;" alt="">
                  <div class="ai-warn-intro">
                    <div class="ai-warn-intro-item" style="margin-top: 8px;">
                      <div class="item-title">违规情况：</div>
                      <div class="item-text">{{ item.wg }}</div>
                    </div>
                    <div class="ai-warn-intro-item">
                      <div class="item-title">经营户：</div>
                      <div class="item-text">{{ item.operator }}</div>
                    </div>
                    <div class="ai-warn-intro-item">
                      <div class="item-title">摊位：</div>
                      <div class="item-text">{{ item.time }}</div>
                    </div>
                    <div class="ai-warn-intro-item">
                      <div class="item-title">时间：</div>
                      <div class="item-text">{{ item.time }}</div>
                    </div>
                    <div class="ai-warn-intro-item">
                      <div class="item-title">处置情况：</div>
                      <div class="item-text">{{ item.result }}</div>
                    </div>
                    <div class="ai-warn-intro-item">
                      <div class="item-title">处置时间：</div>
                      <div class="item-text">{{ item.dealTime }}</div>
                    </div>
                  </div>
                </div>
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
      </div>
      <div class="operator-section-965 center-600-965">
        <div class="section-title">
          交易信息
        </div>
        <div class="two-line">
          <div id="line-left" style="width: 50%;float: left;height: 100%;"></div>
          <div id="line-right" style="width: 50%;float: left;height: 100%;"></div>
        </div>
        <div class="no-bg-title" style="margin-top: 20px;">实时交易信息</div>
        <div class="jyxx-change-1">
          <div class="zfdd-box-icon">
            <img src="../assets/images/index/left_blue.png" @click="leftChange('.jyxx-move-body')" alt="">
          </div>
          <div class="zfdd-box-middle" style="width: 515px;">
            <div class="jyxx-move-body" :style="{marginLeft: marginLeft2 + 'px'}">
              <div class="jyxx-box-middle-item" v-for="(item, index) in jhjlData" :key="index">
                <div class="item-title">{{ item.goods }}</div>
                <div class="item-content">
                  订单号：<span>{{ item.num }}</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;销量：<span>{{ item.name }}</span><br>
                  采购商名称：<span>{{item.type}}</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;货品总额：<span>{{ item.tel }}</span><br>
<!--                  统一社会信用代码/身份证号：<span>{{item.id}}</span><br>-->
                </div>
                <div class="item-time">交易时间：2022-06-03 12:00</div>
              </div>
            </div>
          </div>
          <div class="zfdd-box-icon">
            <img src="../assets/images/index/right_blue.png" @click="rightChange('.jyxx-move-body')" alt="">
          </div>
        </div>
        <div class="no-bg-title" style="margin-top: 10px;">精准致富订单：¥13949.56 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #FDCF30">特色农副产品：¥13949.56</span></div>
        <div class="jyxx-change-1">
          <div class="zfdd-box-icon">
            <img src="../assets/images/index/left_blue.png" @click="leftChange('.zfdd-move-body')" alt="">
          </div>
          <div class="zfdd-box-middle" style="width: 515px;">
            <div class="jyxx-move-body zfdd-move-body" :style="{marginLeft: marginLeft3 + 'px'}">
              <div class="jyxx-box-middle-item" v-for="(item, index) in jhjlData" :key="index">
                <div class="item-title">{{ item.goods }}</div>
                <div class="item-content">
                  订单号：<span>{{ item.num }}</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;销量：<span>{{ item.name }}</span><br>
                  采购商名称：<span>{{item.type}}</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;货品总额：<span>{{ item.tel }}</span><br>
                  <!--                  统一社会信用代码/身份证号：<span>{{item.id}}</span><br>-->
                </div>
                <div class="item-time">交易时间：2022-06-03 12:00</div>
              </div>
            </div>
          </div>
          <div class="zfdd-box-icon">
            <img src="../assets/images/index/right_blue.png" @click="rightChange('.zfdd-move-body')" alt="">
          </div>
        </div>
        <div class="no-bg-title" style="margin-top: 20px;">
          商品销量Top3
          <div class="period-btns-box">
            <div class="period-btns-item" :class="{'period-btns-item-secected': periodIndex === 1}" @click="changePeriod(1)">本年</div>
            <div class="period-btns-item" :class="{'period-btns-item-secected': periodIndex === 2}" @click="changePeriod(2)">本季</div>
            <div class="period-btns-item" :class="{'period-btns-item-secected': periodIndex === 3}" @click="changePeriod(3)">本月</div>
            <div class="period-btns-item" :class="{'period-btns-item-secected': periodIndex === 4}" @click="changePeriod(4)">本周</div>
          </div>
        </div>
        <div class="safety-list-title" style="margin-top: 00px;">
          <div class="safety-list-title-item" style="width: 10%;">序号</div>
          <div class="safety-list-title-item" style="width: 30%;">商品名称</div>
          <div class="safety-list-title-item" style="width: 30%;">销售额</div>
          <div class="safety-list-title-item" style="width: 30%;">销售量</div>
        </div>
        <div class="safety-list-box" style="height: 81px;">
          <vue-seamless-scroll
              :data="gfxjyhListData"
              class="seamless-warp"
              :class-option="classOption">
            <div v-for="(item, index) in gfxjyhListData" :key="index" class="safety-list-box-item">
              <div class="item-section" style="width: 10%;">{{index + 1}}</div>
              <div class="item-section" style="width: 30%;">{{item.type}}</div>
              <div class="item-section" style="width: 30%;">{{item.num}}</div>
              <div class="item-section" style="width: 30%;">{{item.num}}</div>
            </div>
          </vue-seamless-scroll>
        </div>
        <div class="no-bg-title" style="margin-top: 20px;">在售商品</div>
        <div class="safety-list-title" style="margin-top: 00px;">
          <div class="safety-list-title-item" style="width: 14%;">商品</div>
          <div class="safety-list-title-item" style="width: 16%;">库存</div>
          <div class="safety-list-title-item" style="width: 16%;">售价</div>
          <div class="safety-list-title-item" style="width: 30%;">产地</div>
          <div class="safety-list-title-item" style="width: 20%;">进货时间</div>
        </div>
        <div class="safety-list-box" style="height: 81px;">
          <vue-seamless-scroll
              :data="gfxjyhListData"
              class="seamless-warp"
              :class-option="classOption">
            <div v-for="(item, index) in gfxjyhListData" :key="index" class="safety-list-box-item">
              <div class="item-section" style="width: 14%;">{{index + 1}}</div>
              <div class="item-section" style="width: 16%;">{{item.type}}</div>
              <div class="item-section" style="width: 16%;">{{item.num}}</div>
              <div class="item-section" style="width: 30%;">{{item.num}}dfadfasdfasdsdffafdsafafdfasdfadsfaddff</div>
              <div class="item-section" style="width: 20%;">{{item.tel}}</div>
            </div>
          </vue-seamless-scroll>
        </div>
      </div>
      <div class="operator-section-655 right-top">
        <div class="section-title">
          安全溯源
        </div>
        <div class="no-bg-title" style="margin-top: 0px;">进出场报备</div>
        <div class="operator-left-bottom-anm1">
          <vue-seamless-scroll
              :data="carListData"
              class="operator-left-bottom-anm1"
              :class-option="classOption1">
            <div class="yqfk-section3"  style="display: inline-block;" v-for="(item, index) in carListData" :key="index">
              <div class="yqfk-section3-item">
                <div class="item-title">车牌号：</div>
                <div class="item-text" style="width: 90px;">{{ item.carCard }}</div>
              </div>
              <div class="yqfk-section3-item">
                <div class="item-title">车辆类型：</div>
                <div class="item-text" style="width: 50px;">{{ item.carType }}</div>
              </div>
              <div class="yqfk-section3-item">
                <div class="item-title" style="width: 90px;">车辆来源地：</div>
                <div class="item-text" style="width: 100px;">{{ item.from }}</div>
              </div>
              <div class="yqfk-section3-item">
                <div class="item-title">司机姓名：</div>
                <div class="item-text" style="width: 90px;">{{ item.name }}</div>
              </div>
              <div class="yqfk-section3-item">
                <div class="item-title">联系方式：</div>
                <div class="item-text" style="width: 95px;">{{ item.tel }}</div>
              </div>
              <div class="yqfk-section3-item">
                <div class="item-title" style="width: 45px;">货物：</div>
                <div class="item-text" style="width: 100px;">{{ item.goods }}</div>
              </div>
              <div class="yqfk-section3-item">
                <div class="item-title">入场时间：</div>
                <div class="item-text" style="width: 150px;">{{ item.enterTime }}</div>
              </div>
              <div class="yqfk-section3-item">
                <div class="item-title">出场时间：</div>
                <div class="item-text" style="width: 150px;">{{ item.leaveTime }}</div>
              </div>
            </div>
          </vue-seamless-scroll>
        </div>
        <div id="aqsy-bar" style="width: 100%;height: 215px;"></div>
        <div class="no-bg-title" style="margin-top: 40px;text-indent: 20px">进货记录</div>
        <div class="jhjl-box">
          <div class="zfdd-box-icon">
            <img src="../assets/images/index/left_blue.png" @click="leftChange('.jhjl-move-body')" alt="">
          </div>
          <div class="zfdd-box-middle" style="width: 515px;">
            <div class="jhjl-move-body" :style="{marginLeft: marginLeft1 + 'px'}">
              <div class="jhjl-box-middle-item" v-for="(item, index) in jhjlData" :key="index">
                <div class="item-title">{{ item.goods }}</div>
                <div class="item-content">
                  进货量：<span>{{ item.num }}</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;供货商名称：<span>{{ item.name }}</span><br>
                  供货商类型：<span>{{item.type}}</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;联系方式：<span>{{ item.tel }}</span><br>
                  统一社会信用代码/身份证号：<span>{{item.id}}</span><br>
                </div>
              </div>
            </div>
          </div>
          <div class="zfdd-box-icon">
            <img src="../assets/images/index/right_blue.png" @click="rightChange('.jhjl-move-body')" alt="">
          </div>
        </div>
      </div>
      <div class="operator-section-285 right-bottom">
        <div class="section-title">
          食品检测
        </div>
        <div class="two-target">
          <div class="main-item">
            <div class="main-item-num" style="margin-top: 10px;font-size: 35px;font-weight: 400;">90%</div>
            <div class="main-item-name" style="margin-top: 00px;">食品检测合格率</div>
          </div>
          <div class="main-item">
            <div class="main-item-num" style="margin-top: 10px;font-size: 35px;font-weight: 400; color: #FDCF30">90%</div>
            <div class="main-item-name" style="margin-top: 0px;">不合格商品处置率</div>
          </div>
        </div>
        <div class="safety-list-title" style="margin-top: 00px;">
          <div class="safety-list-title-item" style="width: 14%;">商品</div>
          <div class="safety-list-title-item" style="width: 18%;">检测项目</div>
          <div class="safety-list-title-item" style="width: 14%;">检测限量</div>
          <div class="safety-list-title-item" style="width: 14%;">检测结果</div>
          <div class="safety-list-title-item" style="width: 16%;">处置情况</div>
          <div class="safety-list-title-item" style="width: 20%;">检测时间</div>
        </div>
        <div class="safety-list-box" style="height: 81px;">
          <vue-seamless-scroll
              :data="gfxjyhListData"
              class="seamless-warp"
              :class-option="classOption">
            <div v-for="(item, index) in gfxjyhListData" :key="index" class="safety-list-box-item">
              <div class="item-section" style="width: 14%;">{{item.name}}</div>
              <div class="item-section" style="width: 18%;">{{item.type}}</div>
              <div class="item-section" style="width: 14%;">{{item.num}}</div>
              <div class="item-section" style="width: 14%;">{{item.num}}</div>
              <div class="item-section" style="width: 16%;">{{item.num}}</div>
              <div class="item-section" style="width: 20%;">{{item.tel}}</div>
            </div>
          </vue-seamless-scroll>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import $ from "jquery";

export default {
  name: "operatorInfo",
  data () {
    return {
      gfxjyhListData: [
        {name: '王大力', type: '好人好事', num: '+5', master: '江锦萍', tel: '2022-06-16 12:00'},
        {name: '玛丽', type: '占道经营', num: '-3', master: '周文彰', tel: '2022-06-16 12:00'},
        {name: '王大力', type: '好人好事', num: '+5', master: '朱思伟', tel: '2022-06-16 12:00'},
        {name: '玛丽', type: '占道经营', num: '-3', master: '叶之宇', tel: '2022-06-16 12:00'},
        {name: '王大力', type: '好人好事', num: '+5', master: '张东科', tel: '2022-06-16 12:00'},
        {name: '玛丽', type: '占道经营', num: '-3', master: '祝原', tel: '2022-06-16 12:00'},
      ],
      aiListData: [
        {operator: '王颖批发', wg: '卫生状况差', time: '2022/7/5 10:13:00', result: '已处理', dealTime: '2022/7/5 10:13', url: require('../assets/images/temp/temp_market1.jpeg')},
        {operator: '水产批发', wg: '占道经营', time: '2022/7/5 15:32:00', result: '已处理', dealTime: '2022/7/5 15:32', url: require('../assets/images/temp/temp_market2.jpeg')},
        {operator: '福宝蔬菜批发', wg: '未佩戴口罩', time: '2022/7/4 18:31:00', result: '已处理', dealTime: '2022/7/4 18:31', url: require('../assets/images/temp/temp_market1.jpeg')},
        {operator: '安心蔬菜', wg: '车辆违规停放', time: '2022/7/4 12:55:00', result: '已处理', dealTime: '2022/7/4 12:55', url: require('../assets/images/temp/temp_market2.jpeg')},
        {operator: '鹏程伟业', wg: '车辆违规停放', time: '2022/7/4 18:53:00', result: '已处理', dealTime: '2022/7/4 18:53', url: require('../assets/images/temp/temp_market1.jpeg')},
      ],
      tradeLineOptions1: {
        title: {
          text: '交易额趋势',
          left: 'center',
          textStyle: {
            fontSize: 16,
            color: '#00F6FF'
          }
        },
        xAxis: {
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#FFFFFF'
          },
          data: ['08/08', '08/11', '08/15']
        },
        yAxis: {
          name: '交易额/元',
          nameTextStyle: {
            color: '#FFFFFF',
            padding: [0, 0, 0, -30]
          },
          axisTick: {
            show: false
          },
          splitNumber: 4,
          axisLabel: {
            color: '#FFFFFF'
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(255,255,255,0.3020)',
              type: 'dashed'
            }
          }
        },
        grid: {
          top: 35,
          left: 45,
          right: 10,
          bottom: 20
        },
        series: [
          {
            name: '交易额趋势',
            type: 'line',
            lineStyle: {
              color: '#00FFAF',
              width: 2
            },
            symbol: 'circle',
            smooth: true,
            symbolSize: 6,
            itemStyle: {
              color: '#00FFAF'
            },
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0, color: 'rgba(0, 255, 175, 0.3020)' // 0% 处的颜色
                }, {
                  offset: 1, color: 'rgba(0, 255, 175, 0.0510)' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }
            },
            data: [20, 70, 40]
          }
        ]
      },
      tradeLineOptions2: {
        title: {
          text: '交易量趋势',
          left: 'center',
          textStyle: {
            fontSize: 16,
            color: '#00F6FF'
          }
        },
        xAxis: {
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#FFFFFF'
          },
          data: ['08/08', '08/11', '08/15']
        },
        yAxis: {
          name: '交易重量/kg',
          nameTextStyle: {
            color: '#FFFFFF',
            padding: [0, 0, 0, -20]
          },
          axisTick: {
            show: false
          },
          splitNumber: 4,
          axisLabel: {
            color: '#FFFFFF'
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(255,255,255,0.3020)',
              type: 'dashed'
            }
          }
        },
        grid: {
          top: 35,
          left: 45,
          right: 10,
          bottom: 20
        },
        series: [
          {
            name: '交易量趋势',
            type: 'line',
            lineStyle: {
              color: '#1AF1FF',
              width: 2
            },
            symbol: 'circle',
            smooth: true,
            symbolSize: 6,
            itemStyle: {
              color: '#1AF1FF'
            },
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0, color: 'rgba(0, 239, 255, 0.3020)' // 0% 处的颜色
                }, {
                  offset: 1, color: 'rgba(0, 239, 255, 0.0510)' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }
            },
            data: [50, 72, 70]
          }
        ]
      },
      periodIndex: 4,
      carListData: [
        {carCard: '新B 73110', carType: '轻卡', from: '山东省-潍坊市', name: '张博庭', tel: '17194052491', goods: '卷心菜、冬瓜', enterTime: '2022/7/5 12:00:00', leaveTime: '未出场'},
        {carCard: '苏N PN397', carType: '微卡', from: '浙江省-杭州市', name: '袁丽燕', tel: '18671083871', goods: '紫角叶', enterTime: '2022/7/6 15:00', leaveTime: '2022/7/7 15:00'},
        {carCard: '粤E M88B6', carType: '中卡', from: '浙江省-金华市', name: '朱柏平', tel: '13404022321', goods: '西兰花、南瓜', enterTime: '2022/7/7 8:00', leaveTime: '2022/7/9 12:00'},
        {carCard: '浙K 8307C', carType: '重卡', from: '安徽省-黄山市', name: '赵梦珍', tel: '18214557999', goods: '空心菜', enterTime: '2022/7/8 10:00', leaveTime: '2022/7/8 12:00'},
        {carCard: '黑H H9978', carType: '微卡', from: '福建省-泉州市', name: '岳腾', tel: '18338183905', goods: '生瓜', enterTime: '2022/7/8 11:00', leaveTime: '2022/7/8 14:00'},
      ],
      flag1: 1,
      flag2: 1,
      flag3: 1,
      marginLeft1: -495,
      marginLeft2: -495,
      marginLeft3: -495,
      jhjlData: [
        {goods: '白菜5', num: '30kg', type: '企业', tel: '13783745843', id: '913707837517951564', name: '测试'},
        {goods: '白菜1', num: '30kg', type: '企业', tel: '13783745843', id: '913707837517951564', name: '测试'},
        {goods: '白菜2', num: '30kg', type: '企业', tel: '13783745843', id: '913707837517951564', name: '测试'},
        {goods: '白菜3', num: '30kg', type: '企业', tel: '13783745843', id: '913707837517951564', name: '测试'},
        {goods: '白菜4', num: '30kg', type: '企业', tel: '13783745843', id: '913707837517951564', name: '测试'},
        {goods: '白菜5', num: '30kg', type: '企业', tel: '13783745843', id: '913707837517951564', name: '测试'},
        {goods: '白菜1', num: '30kg', type: '企业', tel: '13783745843', id: '913707837517951564', name: '测试'},
      ]
    }
  },
  computed: {
    // 公告滚动自定义
    classOption() {
      return {
        step: 2, // 数值越大速度滚动越快
        limitMoveNum: 2, // 开始无缝滚动的数据量 this.cityData.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 43, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 5000, // 单步运动停止的时间(默认值1000ms)
      }
    },
    classOption1() {
      return {
        step: 20, // 数值越大速度滚动越快
        limitMoveNum: 1, // 开始无缝滚动的数据量 this.cityData.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 2, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 580, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 5000, // 单步运动停止的时间(默认值1000ms)
      }
    },
  },
  mounted() {
    this.initTradeLine1()
    this.initTradeLine2()
    this.initAqzsBar()
  },
  methods: {
    back () {
      this.$router.go(-1)
    },
    //交易信息两个折线图
    initTradeLine1 (clear) {
      if (clear) {
        echarts.init(document.getElementById('line-left')).clear()
      }
      echarts.init(document.getElementById('line-left')).setOption(this.tradeLineOptions1)
    },
    initTradeLine2 (clear) {
      if (clear) {
        echarts.init(document.getElementById('line-right')).clear()
      }
      echarts.init(document.getElementById('line-right')).setOption(this.tradeLineOptions2)
    },
    //年、季、月、周切换
    changePeriod (index) {
      this.periodIndex = index
    },
    //商品产地统计柱状图
    initAqzsBar () {
      let bar = echarts.init(document.getElementById('aqsy-bar'))
      let option = {
        title: {
          text: '商品产地统计',
          left: 'center',
          textStyle: {
            fontSize: 16,
            color: '#00F6FF'
          },
          top: 20
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
            label: {
              show: true,
              backgroundColor: 'rgba(73, 145, 254, 1)',
              padding: [5, 7, 5, 7]
            }
          },
          // formatter: '人数：{c}',
          textStyle: {
            color: '#FFF'
          },
          confine: true,
          backgroundColor: 'rgba(0, 0, 0, 0.5)',
          borderColor: 'transparent'
        },
        xAxis: {
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#FFFFFF'
          },
          data: ['浙江', '安徽',  '江西', '江苏', '山东', '福建']
        },
        yAxis: {
          name: '商品数量',
          nameTextStyle: {
            color: '#FFFFFF',
            padding: [0, 0, 0, -30]
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#FFFFFF'
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(255,255,255,0.3020)',
              type: 'dashed'
            }
          }
        },
        grid: {
          top: 50,
          left:60,
          right: 10,
          bottom: 40
        },
        series: [
          {
            name: '检出商品排行',
            type: 'bar',
            symbol: 'circle',
            barWidth: 24,
            itemStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0, color: 'rgba(0, 239, 255, 0.6471)' // 0% 处的颜色
                }, {
                  offset: 1, color: 'rgba(0, 239, 255, 0.2039)' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              },
              borderRadius: [2,2,0,0]
            },
            data: [3889, 3021, 2912, 3001, 2564, 1888]
          }
        ]
      }
      bar.setOption(option)
    },
    leftChange (css) {
      if (css === '.jhjl-move-body') {
        if (this.flag1 > 0) {
          this.flag1--
          if (this.flag1 === 0) {
            //无缝循环
            setTimeout(() => {
              this.flag1 = this.jhjlData.length - 2
              $(css).css({
                transition: 'unset'
              })
              this.marginLeft1 = -495 * this.flag1
            }, 200)
          }
          $(css).css({
            transition: 'all 0.2s'
          })
          this.marginLeft1 = -495 * this.flag1
        }
      } else if (css === '.jyxx-move-body') {
        if (this.flag2 > 0) {
          this.flag2--
          if (this.flag2 === 0) {
            //无缝循环
            setTimeout(() => {
              this.flag2 = this.jhjlData.length - 2
              $(css).css({
                transition: 'unset'
              })
              this.marginLeft2 = -495 * this.flag2
            }, 200)
          }
          $(css).css({
            transition: 'all 0.2s'
          })
          this.marginLeft2 = -495 * this.flag2
        }
      } else if (css === '.zfdd-move-body') {
        if (this.flag3 > 0) {
          this.flag3--
          if (this.flag3 === 0) {
            //无缝循环
            setTimeout(() => {
              this.flag3 = this.jhjlData.length - 2
              $(css).css({
                transition: 'unset'
              })
              this.marginLeft3 = -495 * this.flag3
            }, 200)
          }
          $(css).css({
            transition: 'all 0.2s'
          })
          this.marginLeft3 = -495 * this.flag3
        }
      }
    },
    rightChange (css) {
      if (css === '.jhjl-move-body') {
        if (this.flag1 < this.jhjlData.length - 1) {
          this.flag1++
          if (this.flag1 === this.jhjlData.length - 1) {
            //无缝循环
            setTimeout(() => {
              this.flag1 = 1
              $(css).css({
                transition: 'unset'
              })
              this.marginLeft1 = -495 * this.flag1
            }, 200)
          }
          $(css).css({
            transition: 'all 0.2s'
          })
          this.marginLeft1 = -495 * this.flag1
        }
      } else if (css === '.jyxx-move-body') {
        if (this.flag2 < this.jhjlData.length - 1) {
          this.flag2++
          if (this.flag2 === this.jhjlData.length - 1) {
            //无缝循环
            setTimeout(() => {
              this.flag2 = 1
              $(css).css({
                transition: 'unset'
              })
              this.marginLeft2 = -495 * this.flag2
            }, 200)
          }
          $(css).css({
            transition: 'all 0.2s'
          })
          this.marginLeft2 = -495 * this.flag2
        }
      } else if (css === '.zfdd-move-body') {
        if (this.flag3 < this.jhjlData.length - 1) {
          this.flag3++
          if (this.flag3 === this.jhjlData.length - 1) {
            //无缝循环
            setTimeout(() => {
              this.flag3 = 1
              $(css).css({
                transition: 'unset'
              })
              this.marginLeft3 = -495 * this.flag3
            }, 200)
          }
          $(css).css({
            transition: 'all 0.2s'
          })
          this.marginLeft3 = -495 * this.flag3
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
@import "../assets/style/operatorInfo.css";
</style>
